<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>add</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/add.css">
    <link type="text/css" rel="stylesheet" href="css/shared.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <![endif]-->
    <script src="js/common.js"></script>
    <script src="js/ractive.js"></script>
</head>
<body>
    <!--login-user content-->
    <div class="container">
        <div class="row">
            <div class="navbar-right">
                <label class="login_user">登录人</label>
                <label class="login_user">
                    <i class="fa fa-sign-out"></i>
                    <span class="fa" id="exit">退出登录</span>
                </label>

            </div>
        </div>
    </div>
    <!--main content-->
    <div class="container-fluid systemnameAndOperate_margin">
        <div class="row">
            <!--left_contenrt-->
            <div class="col-md-6 col-sm-12 col-xs-12 addPage_main_content">
                <table class="table">
                    <tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <div class="input-group-sm line_marign">
                            <label class="odd_td_label_marLeft">品名</label>
                            <input type="text" class="big_input" id="procucts_name">
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <div class="input-group-sm line_marign">
                                <label class="odd_td_label_marLeft">编号</label>
                                <input type="text" class="big_input" disabled id="serinum">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="even_td_label_marLeft">尺寸</label>
                                <input type="text" class="small_input" id="productsize">
                            </div>
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="type_label_marginRight">材质</label>
                                <input type="text" class="small_input" id="material">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width radio_middle">
                            <label class="type_label_marginRight even_td_label_marLeft">单位</label>
                            <input type="radio" class="styled" name="unit" value="件" checked>件
                            <input type="radio" class="styled" name="unit" value="克">克
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="type_label_marginRight">类型</label>
                                <input type="text" class="small_input" id="productstyle">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="even_td_label_marLeft">颜色</label>
                                <input type="text" class="small_input" id="productcolor">
                            </div>
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width radio_middle">
                            <label class="type_label_marginRight">性别</label>
                            <input type="radio" class="styled" name="sex" value="通用" checked>通用
                            <input type="radio" class="styled" name="sex" value="男">男
                            <input type="radio" class="styled" name="sex" value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="even_td_label_marLeft">产地</label>
                                <input type="text" class="small_input" id="productorgin">
                            </div>
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label>零售价</label>
                                <input type="number" class="small_input" id="retailprice">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <div class="input-group-sm line_marign">
                                <label class="odd_td_label_marLeft">备注</label>
                                <input type="text" class="big_input" id="productnote">
                            </div>
                        </td>
                    </tr>
                </table>
                <hr/>
                <table class="table">
                    <tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <button type="button" class="btn btn-primary button_marign" id="editproduct">保存</button>
                            <button type="button" class="btn btn-primary button_marign" id="addproduct">新增</button>
                            <label class="warn" id="warning1">提示语</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="even_td_label_marLeft">库存操作</label>
                            </div>
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="type_label_marginRight">操作</label>
                                <input class="radio_size" type="radio" name="ware-operate" value="入库" /> 入库
                                <input class="radio_size" type="radio" name="ware-operate" value="出库" checked/> 出库
                                <input class="radio_size" type="radio" name="ware-operate" value="过库"/> 过库
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="type_label_marginRight even_td_label_marLeft" id="productsnum">数量</label>
                                <input type="text" class="small_input" name="number">
                            </div>
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="type_label_marginRight">库位</label>
                                <input type="text" class="small_input" id="storagelocation">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="even_td_label_marLeft">入厂价</label>
                                <input type="number" class="small_input" id="in_price" disabled>
                            </div>
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label>出厂价</label>
                                <input type="number"  class="small_input" id="out_price">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="type_label_marginRight even_td_label_marLeft">电话</label>
                                <input type="text" class="small_input" id="buyersphone">
                            </div>
                        </td>
                        <td class="td_nopadding_noborderTop part_td_width">
                            <div class="input-group-sm line_marign">
                                <label class="type_label_marginRight">名称</label>
                                <input type="text" class="small_input" id="buyers">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <div class="input-group-sm line_marign">
                                <label class="odd_td_label_marLeft">地址</label>
                                <input type="text" class="big_input" id="buyersaddress">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="part_td_width tr_state_style">
                            <label class="type_label_marginRight even_td_label_marLeft">状态</label>
                            <input type="radio" class="styled" name="state" value="直销" checked> 直销
                            <input type="radio" class="styled" name="state" value="预备"> 预备
                        </td>
                    </tr>
                </table>
                <hr/>
                <table class="table">
                    <tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <button type="button" class="btn btn-primary button_marign" id="submit">提交</button>
                            <button type="button" class="btn btn-primary button_marign" id="reset">取消</button>
                            <label class="warn">提示语</label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <div class="input-group-sm line_marign">
                                <label class="odd_td_label_marLeft">库存信息</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!--right_content-->
            <div class="col-md-6 col-xs-12">
                <div id="productscontent">
                    <div class="col-sm-3 col-xs-3 product_content_div">
                        <div>
                            <img src="imgs/gem.jpg" class="img-responsive product_content_img">
                            <div class="product_content_title">
                                YT/永泰华珠宝天然红宝石裸石 彩宝配石彩色宝石戒指吊坠首饰定制
                            </div>
                            <div class="product_content_button">
                                <button type="submit" class="btn btn-primary btn-xs product_content_button_marginRight">暂存</button>
                                <button type="submit" class="btn btn-primary btn-xs">编辑</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-3 product_content_div">
                        <div>
                            <img src="imgs/gem2.jpg" class="img-responsive product_content_img">
                            <div class="product_content_title">
                                YT/永泰华珠宝
                            </div>
                            <div class="product_content_button">
                                <button type="submit" class="btn btn-primary btn-xs product_content_button_marginRight">暂存</button>
                                <button type="submit" class="btn btn-primary btn-xs">编辑</button>
                            </div>
                        </div>
                    </div>
                    <!--分页-->
                    <div align="center"class="col-sm-10 col-xs-10">
                        <nav class="div_nav">
                            <ul class="pagination" >
                                <li id="prev"><a href="javascript:void(0);" aria-label="Previous" >
                                    <span aria-hidden="true" id="prev2">上一页</span>
                                </a></li>
                            </ul>
                            <ul class="pagination" id="pagenum">
                            </ul>
                            <ul class="pagination">
                                <li  id="next">
                                    <a href="javascript:void(0);" aria-label="Next">
                                        <span aria-hidden="true" id="next2">下一页</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-sm-11 col-xs-11"  style="max-height: 270px;overflow: hidden">
                    <div class="imgpreview" style="max-height: 250px;" id="showpic">
                        <div class="col-sm-5 col-xs-5" style="margin-bottom: 3px;margin-right: 3px;">
                            <img src="imgs/gem.jpg" class="img-responsive product_content_img">
                            <div class="product_content_title">
                                YT/永泰华珠宝天然红宝石裸石 彩宝配石彩色宝石戒指吊坠首饰定制
                            </div>
                            <button type="submit" class="btn btn-primary btn-xs">编辑</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-11 col-xs-11" style="background-color: #fff">
                    <table class="table" style="margin-bottom: 0">
                        <tr>
                            <td colspan="2" class="td_nopadding_noborderTop">
                                <label>文件:</label>
                                <input type="file" multiple style="display: inline-block">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" class="td_nopadding_noborderTop">
                                <label>备注:</label>
                                <input type="text" class="small_input">
                            </td>
                        </tr>
                        <td colspan="2" class="td_nopadding_noborderTop">
                            <button type="button" class="btn btn-primary btn-sm" id="uploading">上传</button>
                            <button type="button" class="btn btn-primary btn-sm">拍照</button>
                        </td>
                    </table>
                </div>
                <div  class="col-sm-11 col-xs-11" style="max-height: 320px;overflow: hidden">
                    <div class="imgpreview" id="imgcontent"style="max-height: 300px">
                    </div>
                </div>
            </div>
        </div>
    </div>
     <script id='images_content' type='text/ractive'>
     {{#each procuctData}}
         <div class="col-sm-5 col-xs-5" style="margin-bottom: 3px;margin-right: 3px;">
                    <img src="imgs/gem.jpg" class="img-responsive product_content_img">
                    <div class="product_content_title">
                        YT/永泰华珠宝天然红宝石裸石 彩宝配石彩色宝石戒指吊坠首饰定制
                    </div>
                    <button type="submit" class="btn btn-primary btn-xs">编辑</button>
         </div>
     {{/each}}
     </script>
    <script id='procucts_content' type='text/ractive'>
     {{#each procuctData}}
         <div class="col-sm-3 col-xs-3 product_content_div">
                <div data-index={{商品ID}}>
                    <img src="imgs/{{照片名}}" class="img-responsive product_content_img">
                    <div class="product_content_title">
                        {{产品名}}
                    </div>
                    <div class="product_content_button">
                        <button type="submit" class="btn btn-primary btn-xs product_content_button_marginRight">暂存</button>
                        <button type="submit" class="btn btn-primary btn-xs">编辑</button>
                    </div>
                </div>
         </div>
     {{/each}}
     </script>
    <script type="text/javascript" src="./js/forms-style.js"></script>
   <script src="js/pages/add.js"></script>
    <script src="js/pages/shared.js"></script>
</body>
</html>